<template>
	<view class="sign-page bg-w pb40">
		<view class="sign-page-bg"></view>
		<view class="sign-main">
			<view class="flex alcenter space pr30">
				<navigator url="/pages/exchange/index">
				<view class="mall-btn">
					积分兑换
				</view>
				</navigator>
				<!-- <view class="sign-btn">签到提醒</view> -->
				<view class="sign-btn on">已签到</view>
			</view>
			<view class="plr30 mt60">
				
				<view class="sign-top-main box-shadow   bg-w">
						<view class="sign-switch flex center alcenter" :class="isSign ? 'sign-yes' : ''">
							<view v-if="isSign == false" @click="signIng" @touchstart="signOn = true" @touchend="signOn = false" :class="signOn ? 'on' : ''" class="sign-switch-box flex center alcenter">
								<text class="text-w ft24 ftw600">签到</text>
							</view>
							
							<view v-else class="sign-switch-box-yes flex center alcenter">
								<view class="text-center">
									<view class="text-w ft24 ftw600"><text>已签到</text></view>
									<view class="ft14 ftw600 text-w"><text>明日再来</text></view>
								</view>
							</view>
							
						</view>
						
						<view class="pd30">
							<view class="flex space alcenter">
								<view class="text-center">
									<navigator url="/pages/member/sign/award">
									<view>
										<image class="wh40" :src="'icon_diamond'"></image>
									</view>
									<view class="ft14 text-info">我的奖品券</view>
									</navigator>
								</view>
								<view @click="roleAlert = true" class="text-center">
									<view>
										<image class="wh40" :src="'iconbtn_question'"></image>
									</view>
									<view class="ft14 text-info">活动规则</view>
								</view>
							</view>
							
							<view class="text-center mt40">
								<text class="ft18 ftw600 text-main">本周已连续签到：</text>
								<text class="ft18 ftw600 text-theme">2天</text>
							</view>
						</view>
						<view class="line mt20 mb30"></view>
						
						<view class="flex">
							<view class="col3 text-center">
								<view class="ft14 text-info">累计签到积分</view>
								<view class="mt10 ft16 ftw600 text-default">200</view>
							</view>
							<view class="col3 text-center">
								<view class="ft14 text-info">补签卡</view>
								<view class="mt10 ft16 ftw600 text-default">0</view>
							</view>
							<view class="col3 text-center">
								<view class="ft14 text-info">累计签到天数</view>
								<view class="mt10 ft16 ftw600 text-default">10</view>
							</view>
						</view>
						
						<view class="mt40 plr30 flex alcenter space sign-plus-bg" :style="signPlusBg">
							<text class="ft16 ftw600 sign-plus-text">
								PLUS会员签到送双倍积分
							</text>
							
							<view class="sign-plus-open flex alcenter center">
								<text class="ft14 text-main ftw600">立即开通</text>
								<view class="iconfont iconbtn_more scale6"></view>
							</view>
						</view>
				</view>
				
				
				
				<view class="pd30 mt40 box-shadow bg-w bdr16">
					<view class="flex center wrap">
						
						<view v-for="(item,index) in days" :key="index" :class="index > 0 ? ' ml20 ' : ''" class="sign-day-box mb30">
							<view class="ft12 ftw600  text-center mb10" :class="item.isToday ? 'text-theme' : 'text-main' ">{{item.isToday ? '今天': item.name}}</view>
							<view class="sign-box">
								
								<view class="bg" :class="item.isSign ? '' : 'opacity2'" :style="signBoxBg"></view>
								<view class="sign-box-main">
									<view class="pt20 flex center">
										<view class="wh40 sign-item-integral">
											<view v-if="item.isSign" class="sign-integral-num ft18 ftw600 text-w">+1</view>
											<image v-if="item.replenish" class="sign-bu-icon" :src="'iconbtn_add'"></image>
											<image class="wh40" :src="item.isSign ? 'icon_diamond' : ''"></image>
										</view>
									</view>
									<view  v-if="item.isSign == 1" class="sign-status flex center alcenter">
										<text class="iconfont icon_selected text-w"></text>
									</view>
								</view>
							</view>
						</view>
						
						
						
					</view>
				
				
					<view class="flex center mt40">
						<view class="sign-share flex alcenter center text-theme">
							<text class="iconfont iconbtn_bottom_share ft20"></text>
							<text class="ft16 ftw600 ml10 text-theme">分享好友得补签卡</text>
						</view>
					</view>
				</view>
					
				<view class="mt40">
					<view v-if="isLotter == false" class="sign-result-box pd30" :style="signResultBg">
						
						<view class="pt40 text-center ft14 text-main ftw600">
							1周连续签到7天可获得3次抽奖机会
						</view>
						<view @click="lotteryAct" class="flex center mt40">
							<view class="sign-lottery">开始抽奖</view>
						</view>
						<view class="ft12 ftw600 mt10 text-center">
							<text class="text-main">还剩</text>
							<text class="text-theme ">0</text>
							<text class="text-main">次抽奖机会</text>
						</view>
					</view>
					
					<view v-else>
						<view  class="sign-result-box pd30" :style="signResultBg">
							<view class="pt40 flex alcenter center">
								<image class="title-img" :src="''"></image>
								<text class="ml30 mr30 ft18 ftw600 text-main">
									恭喜您中奖
								</text>
								<image class="title-img" :src="''"></image>
							</view>
							
							<view class="ft24 ftw600 text-sign text-center mt30">
								¥50元优惠券一张
							</view>
							 <view class="ft14 text-info ftw600 text-center mt20">
								 请前往个人中心 > 优惠券查看
							 </view>
						</view>
					</view>
				</view>	
				
			</view>
		</view>
		
		
		<unio2o-sign-role-alert :show="roleAlert" @closed="roleAlert = false"></unio2o-sign-role-alert>
		<unio2o-sign-result :show="signResult" @closed="signResult = false"></unio2o-sign-result>
	</view>
</template>

<script>
	import unio2oSignResult from '@/components/module/sign/signResult.vue';
	import unio2oSignRoleAlert from '@/components/module/sign/roleAlert.vue';
	export default{
		components:{
			unio2oSignRoleAlert,
			unio2oSignResult
		},
		computed:{
			signPlusBg(){
				return 'background-color:#4ECDC4;';
			},
			signBoxBg(){
				return 'background-color:#4ECDC4;';
			},
			signResultBg(){
				return 'background-color:#4ECDC4;';
			}
		},
		data(){
			return {
				isSign:false,
				roleAlert:false,
				signResult:false,
				isLotter:false,
				signOn:false,
				days:[
					{
						name:'周一',
						isSign:1,
						replenish:0,
						isToday:0,
					},
					{
						name:'周二',
						isSign:1,
						replenish:0,
						isToday:0,
					},{
						name:'周三',
						isSign:0,
						replenish:1,
						isToday:0,
					},{
						name:'周四',
						isSign:0,
						replenish:1,
						isToday:0,
					},{
						name:'周五',
						isSign:1,
						replenish:0,
						isToday:1,
					},{
						name:'周六',
						isSign:0,
						replenish:0,
						isToday:0,
					},{
						name:'周日',
						isSign:0,
						replenish:0,
						isToday:0,
					}
				]
			}
		},methods:{
			signIng(){
				this.isSign = true;
				this.signResult = true;
			},
			lotteryAct(){
				this.isLotter = true;
			}
		}
	}
</script>

<style>
	.sign-result-box .title-img{
		width:52rpx;
		height:40rpx;
	}
	.sign-lottery{
		width:350rpx;
		height:80rpx;
		background:linear-gradient(180deg,rgba(255,139,89,1) 0%,rgba(255,79,78,1) 100%);
		border-radius:40rpx;
		font-size: 36rpx;
		font-weight: 600;
		color:#FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}
	.sign-lottery.dis{
		background: #CCCCCC;
	}
	.sign-result-box{
		width: 100%;
		height: 320rpx;
	}
	.sign-share{
		width:400rpx;
		height:80rpx;
		border-radius:40rpx;
		border:2rpx solid rgba(255,109,0,1);
	}
	.sign-item-integral{
		position: relative;
	}
	.sign-integral-num{
		position: absolute;
		z-index: 2;
		height: 80rpx;
		width: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.sign-bu-icon{
		width: 96rpx;
		height: 44rpx;
		position: absolute;
		top:-30rpx;
		left: -8rpx;
		z-index: 4;
	}
	.sign-day-box{
		width: 140rpx;
	}
	.sign-status{
		height: 60rpx;
	}
	.sign-box{
		height: 160rpx;
		width: 140rpx;
		border-radius: 8rpx;
		position: relative;
	}
	.sign-box .bg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.sign-box .sign-box-main{
		position: relative;
		z-index: 2;
	}
	.sign-plus-open{
		width:172rpx;
		height:64rpx;
		background:linear-gradient(90deg,rgba(255,230,172,1) 0%,rgba(242,213,145,1) 100%);
		border-radius:32rpx
	}
	.sign-plus-text{
		color:#EDCB60;
		background:linear-gradient(90deg, rgba(255,230,172,1) 0%, rgba(233,183,64,1) 100%);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
	.sign-plus-bg{
		height: 100rpx;
		border-radius:0rpx 0rpx 32rpx 32rpx;
	}
	.sign-switch{
		width:250rpx;
		height:250rpx;
		background:linear-gradient(180deg,rgba(255,139,89,.2) 0%,rgba(255,79,78,.2) 100%);
		
		border-radius: 125rpx;
		position: absolute;
		left: calc(50% - 125rpx);
		top: -80rpx;
	}
	.sign-switch.sign-yes{
		background:rgba(204,204,204,.2);

	}
	.sign-switch .sign-switch-box{
		width:210rpx;
		height:210rpx;
		background:linear-gradient(180deg,rgba(255,139,89,1) 0%,rgba(255,79,78,1) 100%);
		border-radius: 105rpx;
		transition:  all 0.3s; 
	}
	.sign-switch .sign-switch-box-yes{
		width:210rpx;
		height:210rpx;
		background:#CCCCCC;
		border-radius: 105rpx;
	}
	.sign-switch .sign-switch-box.on{
		transform: scale(1.1);
	}
	.sign-switch-box-yes text{
		text-shadow:0rpx 8rpx 8rpx rgba(0,0,0,0.1);
	}
	.sign-switch .sign-switch-box text{
		text-shadow:0rpx 8rpx 8rpx rgba(0,0,0,0.1);
	}
	.sign-top-main{
		position: relative;
		border-radius: 32rpx;
	}
	.sign-btn{
		width:160rpx;
		height:64rpx;
		background:#FFFFFF;
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
		border-radius:32rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color:#FF4F4E;
		font-weight: 600;
	}
	.sign-btn.on{
		color:#999999;
	}
	.mall-btn{
		width:160rpx;
		height:64rpx;
		background:#FFFFFF;
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
		border-radius:0rpx 32rpx 32rpx 0rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color:#FF4F4E;
		font-weight: 600;
	}
	.sign-page{
		position: relative;
	}
	.sign-page-bg{
		width: 100%;
		height: 750rpx;
		position: absolute;
		z-index: 2;
		background:linear-gradient(360deg,rgba(255,255,255,1) 0%,rgba(255,229,217,1) 100%);
	}
	.sign-main{
		position: relative;
		z-index: 3;
		width: 100%;
		padding-top: 30rpx;
	}
</style>